{%extends 'dbmp_base.html' %}

{% load staticfiles %}
{% load ip_filters %}
{% load filters_dbmp_mysql_instance %}

<!-- 添加该页面自己需要的 css 模板 -->
{% block css %}
    <link href="{% static 'css/plugins/footable/footable.core.css' %}" rel="stylesheet">
    <link href="{% static 'css/plugins/toastr/toastr.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block app_title %}MySQL实例详细信息{% endblock %}

<!-- 其他元素模块 -->
{% block top_element %}
<div class="row fontawesome-icon-list">
    <!-- 添加返回MySQL实例列表按钮 -->
    <div class="fa-hover col-md-2 col-sm-3">
        <a href="{% url 'list_instance_use_business_detail' %}">
            <i class="fa fa-home"></i>
            实例列表
        </a>
    </div>
</div>
{% endblock %}

<!-- 显示该页面主要展示的内容 -->
{% block content %}
<!-- 数据库列表 -->
<section id="databases_section">
    <h2 class="page-header">数据库列表</h2>
     
    <div id="database_list">
        <table class="footable table table-stripped toggle-arrow-tiny table-hover" data-page-size="100">
            <thead>
                <tr>
                    <th class="text-center col-xs-1">#</th>
                    <th class="text-center">数据库名</th>
                    <th class="text-center">同步时间</th>
                </tr>
            </thead>
            <tbody>
            {% for dbmp_mysql_database in dbmp_mysql_databases %}
                <tr id="database_row_{{ dbmp_mysql_database.mysql_database_id }}">
                    <td class="text-center col-xs-1">
                        <input type="checkbox" name="database_check" class="database_check"
                               id="database_check_{{ dbmp_mysql_database.mysql_database_id }}" 
                               value="{{ dbmp_mysql_database.mysql_database_id }}" />
                    </td>
                    <td class="text-center" id="database_name_{{ dbmp_mysql_database.mysql_database_id }}">{{ dbmp_mysql_database.name }}</td>
                    <td class="text-center">{{ dbmp_mysql_database.update_time | date:"Y-m-d H:i:s" }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

<!-- 添加该页面自己需要的 js 模板 -->
{% block js %}
    <script src="{% static 'js/content.min.js' %}"></script>
    <script src="{% static 'js/plugins/footable/footable.all.min.js' %}"></script>
    <script src="{% static 'js/plugins/toastr/toastr.min.js' %}"></script>

    <script>
        // 使用 Django csrf 功能
        $.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});

        $(document).ready(function(){
            // 打开页面判断每一个 checkbox是否需要选中
            $(".database_check").each(function (index, obj){
                check_has_database(obj, {{ mysql_business_id }});
            });

            // 点击保存时添加数据
            $(".database_check").change(function(){
                update_business_database(this, {{ mysql_business_id }})
            });
        });

        // 检查数据库是否已经添加未业务数据库
        function check_has_database(obj, mysql_business_id) {
            // 获取点击的 checkbox 的 mysql_database_id
            mysql_database_id = $(obj).val();

            $.ajax({
                url: "{% url 'dbmp_mysql_business_detail_ajax_has_database' %}",
                type: "POST",
                dataType: "json",
                data: {
                    mysql_database_id: mysql_database_id,
                    mysql_business_id: mysql_business_id
                }
            }).done(function(data) {
                if (data > 0){
                    $(obj).prop("checked", true); // checkbox 选中
                }
            }).error(function(data) {
                // 请求失败, 不做处理
            });
        }

        // 更新业务选取的数据库
        function update_business_database(obj, mysql_business_id) {
            // 获取点击的 checkbox 的 mysql_database_id
            mysql_database_id = $(obj).val();
            // 获取更新的数据库名称
            database_name = $("#database_name_" + mysql_database_id).html();
            // 标记更新动作是删除还是添加
            update_tag = "";
            update_message = "";
            if($(obj).is(":checked")) {
                update_message += "添加";
                update_tag = "add";
            } else {
                update_message += "删除";
                update_tag = "delete";
            }

            $.ajax({
                url: "{% url 'dbmp_mysql_business_detail_ajax_update_database' %}",
                type: "POST",
                dataType: "json",
                data: {
                    mysql_database_id: mysql_database_id,
                    mysql_business_id: mysql_business_id,
                    update_tag: update_tag
                }
            }).done(function(data) {
                if (data == false){
                    toastr.error("数据库-" + database_name + "(" + update_message + ")失败");
                    reverse_check_box_status(obj);
                } else { // 修改成功会返回一个 ID 
                    toastr.success("数据库-" + database_name + "(" + update_message + ")成功");
                    if (update_tag == "delete") { // 删除记录到父窗口
                        delete_database_to_parent_layer(data);
                    } else if (update_tag == "add") { // 添加记录到父窗口
                        add_database_to_parent_layer(data);
                    }
                }
            }).error(function(data) {
                toastr.error("请求失败");
                reverse_check_box_status(obj);
            });
        }

        // 改变 checkbox 状态, 和当前状态相反
        function reverse_check_box_status(obj) {
            if($(obj).is(":checked")) { // 如果选中还原成未选中
                $(obj).removeAttr("checked");
            } else { // 如果未选中还原成选中
                $(obj).prop("checked", true);
            }
        }

        // 在父窗口添加一条记录
        function add_database_to_parent_layer(mysql_business_detail_id) {
            // 获得父元素的 html id
            parent_ele_id = "business_database_" + mysql_business_detail_id;
            // 获得父元素业务数据库个数
            business_database_length = $(".business_database", window.parent.document).length;

            // 获得表格花纹显示的 class 属性
            new_business_database_length = business_database_length + 1;
            speckle_class = "";
            if(new_business_database_length % 2 == 0) {
                speckle_class = "footable-odd";
            } else {
                speckle_class = "footable-even";
            }

            // 获得 需要添加的元素信息
            add_mysql_business_detail_to_parent_layer(mysql_business_detail_id,
                                                      speckle_class);
        }

        // 在父窗口删除一条记录
        function delete_database_to_parent_layer(mysql_business_detail_id) {
            // 获得父元素的 html id
            parent_ele_id = "business_database_" + mysql_business_detail_id;
            $("#" + parent_ele_id, window.parent.document).remove();
        }


        // 获得 需要添加的元素信息
        function add_mysql_business_detail_to_parent_layer(mysql_business_detail_id, speckle_class) {
            $.ajax({
                url: "{% url 'dbmp_mysql_business_detail_ajax_get_detail_by_id' %}",
                type: "POST",
                dataType: "json",
                data: {
                    mysql_business_detail_id: mysql_business_detail_id,
                }
            }).done(function(data) {
                if (data == null){
                    toastr.warning("获取数据失败，导致数据无法添加到父页面。请刷新父页面!");
                } else {
                    business_detail_info_row_html = get_mysql_business_detail_html(data, speckle_class);
                    console.log(business_detail_info_row_html);
                    // 添加一行数据html到父窗口
                    $("#business_database_body", window.parent.document).append(business_detail_info_row_html);
                }
            }).error(function(data) {
                toastr.warning("请求数据失败，导致数据无法添加到父页面。请刷新父页面!");
            });

        }

        // 获得 需要添加到父页面的HTML
        function get_mysql_business_detail_html(business_detail_info, speckle_class) {
            html_str = '';
            html_str += '<tr id="business_database_' + business_detail_info.mysql_business_detail_id + '" class="business_database ' + speckle_class + '"'
            html_str += 'style="display: table-row;">';
            html_str += '    <td id="database_name_' + business_detail_info.mysql_business_detail_id + '" class="text-center">' + business_detail_info.database_name + '</td>';
            html_str += '    <td id="business_name_' + business_detail_info.mysql_business_detail_id + '" class="text-center">' + business_detail_info.business_name + '</td>';
            html_str += '    <td id="instance_host_' + business_detail_info.mysql_business_detail_id + '" class="text-center">' + business_detail_info.instance_host + '</td>';
            html_str += '    <td id="instance_port_' + business_detail_info.mysql_business_detail_id + '" class="text-center">' + business_detail_info.instance_port + '</td>';
            html_str += '    <td id="instance_remark_' + business_detail_info.mysql_business_detail_id + '" class="text-center">' + business_detail_info.instance_remark + '</td>';
            html_str += '    <td id="business_remark_' + business_detail_info.mysql_business_detail_id + '" class="text-center">' + business_detail_info.business_remark + '</td>';
            html_str += '    <td class="text-center">';
            html_str += '        <a onclick="dbmp_mysql_business_detail_delete(' + business_detail_info.mysql_business_detail_id + ')"';
            html_str += '           type="button" class="btn btn-danger btn-xs">';
            html_str += '            <i class="fa fa-trash"></i>';
            html_str += '            删除';
            html_str += '        </a>';
            html_str += '    </td>';
            html_str += '</tr>';
            return html_str;
        }
    </script>
{% endblock %}
